<template>
	<view class="">
		<!-- 轮播图 -->
		<!-- <uni-swiper-dot class="uni-swiper-dot-box" :info="data" :current="current" field="content">
			<swiper class="swiper-box" :current="swiperDotIndex" @change="changeSwiper">
				<swiper-item v-for="(item, index) in data" :key="index">
					<view class="swiper-item" @click="clickBannerItem(item)">
						<image :src="item.image" mode="aspectFill" :draggable="false" />
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot> -->
		<view class="pt-2">
			<!-- 宫格组件 -->

			<wd-card>
				<uni-section title="办公系统自动化" type="line"></uni-section>

				<view class="flex flex-wrap">
					<view v-for="(item, index) in OaMenuItems" :key="index"
						class="w-1/4 flex flex-col items-center py-4" @click="navigateTo(item.path)">
						<view class="icon iconfont" :class="item.icon"
							:style="{ color: item.color, fontSize: '80rpx' }" />
						<text class="mt-2 text-13px font-500 tracking-1px">{{ item.label }}</text>
					</view>
				</view>

				<!-- <wd-grid :column="4">
						<wd-grid-item use-slot v-for="(item, index) in OaMenuItems" :key="index">
							<view class="grid-item-box" @click="navigateTo(item.path)">
								<view class="icon iconfont" :class="item.icon"
									:style="{ color: item.color, fontSize: '30px' }">
								</view>
								<text class="mt-2 text-center text-14px font-500 tracking-2px">{{ item.label }}</text>
							</view>
						</wd-grid-item>
					</wd-grid> -->

			</wd-card>
			<wd-card>
				<uni-section title="智能人事" type="line"></uni-section>

				<view class="flex flex-wrap">
					<view v-for="(item, index) in HRMenuItems" :key="index"
						class="w-1/4 flex flex-col items-center py-4" @click="navigateTo(item.path)">
						<view class="icon iconfont" :class="item.icon"
							:style="{ color: item.color, fontSize: '80rpx' }" />
						<text class="mt-2 text-13px font-500 tracking-1px">{{ item.label }}</text>
					</view>
				</view>


				<!-- <wd-grid :column="4">
						<wd-grid-item use-slot v-for="(item, index) in HRMenuItems" :key="index">
							<view class="grid-item-box" @click="navigateTo(item.path)">
								<view class="icon iconfont" :class="item.icon"
									:style="{ color: item.color, fontSize: '30px' }">
								</view>
								<text class="mt-2 text-center text-14px font-500 tracking-2px">{{ item.label }}</text>
							</view>
						</wd-grid-item>
					</wd-grid> -->

			</wd-card>
			<wd-card>

				<uni-section title="法务审批" type="line"></uni-section>

				<view class="flex flex-wrap">
					<view v-for="(item, index) in LegalMenuItems" :key="index"
						class="w-1/4 flex flex-col items-center py-4" @click="navigateTo(item.path)">
						<view class="icon iconfont" :class="item.icon"
							:style="{ color: item.color, fontSize: '80rpx' }" />
						<text class="mt-2 text-13px font-500 tracking-1px">{{ item.label }}</text>
					</view>
				</view>

				<!-- <wd-grid :column="4">
						<wd-grid-item use-slot v-for="(item, index) in LegalMenuItems" :key="index">
							<view class="grid-item-box" @click="navigateTo(item.path)">
								<view class="icon iconfont" :class="item.icon"
									:style="{ color: item.color, fontSize: '30px' }">
								</view>
								<text class="mt-2 text-center text-14px font-500 tracking-2px">{{ item.label }}</text>
							</view>
						</wd-grid-item>
					</wd-grid> -->

			</wd-card>

			<wd-card>

				<uni-section title="安全合规" type="line"></uni-section>
				<view class="flex flex-wrap">
					<view v-for="(item, index) in SafetyMenuItems" :key="index"
						class="w-1/4 flex flex-col items-center py-4" @click="navigateTo(item.path)">
						<view class="icon iconfont" :class="item.icon"
							:style="{ color: item.color, fontSize: '80rpx' }" />
						<text class="mt-2 text-13px font-500 tracking-1px">{{ item.label }}</text>
					</view>
				</view>
			</wd-card>

		</view>

	</view>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const current = ref(0);
const swiperDotIndex = ref(0);
const data = ref([
	{ image: '/static/banner/oa.png' },
	// { image: '/static/banner/banner01.jpg' },
	// { image: '/static/banner/banner03.jpg' }
]);
const OaMenuItems = ref([
	// { label: '会议管理', icon: 'icon-huiyiguanli-huiyishiguanli', path: '/pages/post-management/index', color: '#f7b51c' },
	{ label: '发文审批', icon: 'icon-fawenshenpi', path: '/pagesPackage/OAsystemAutomation/outgoingDocument/index', color: '#f7b51c' },
	{ label: '收文审批', icon: 'icon-shouwenshenpi', path: '/pagesPackage/OAsystemAutomation/incomingDocument/index', color: '#f7b51c' },
	{ label: '物品领用', icon: 'icon-wupinlingyong', path: '/pagesPackage/OAsystemAutomation/officesuppliesreceived/index', color: '#f7b51c' },
	{ label: '车辆外派', icon: 'icon-hotel-single-bed-upl', path: '/pagesPackage/OAsystemAutomation/vehicleoutsourcing/index', color: '#f7b51c' },
	{ label: '用印申请', icon: 'icon-yongyinshenqing', path: '/pagesPackage/OAsystemAutomation/sealmanager/index', color: '#f7b51c' },
	{ label: '会议申请', icon: 'icon-huiyishenqing', path: '/pagesPackage/OAsystemAutomation/meeting/meetingrequest/index', color: '#f7b51c' },
	{ label: '督办管理', icon: 'icon-shebeiweibao', path: '/pagesPackage/OAsystemAutomation/supervision/index', color: '#f7b51c' },
	{ label: '请示报告', icon: 'icon-qingshibaogao_mianxing', path: '/pagesPackage/OAsystemAutomation/Approvalrequestreport/index', color: '#f7b51c' },
]);
const HRMenuItems = ref([
	// { label: '会议管理', icon: 'icon-huiyiguanli-huiyishiguanli', path: '/pages/post-management/index', color: '#f7b51c' },
	{ label: '请假管理', icon: 'icon-qingjiaguanli', path: '/pagesPackage/OAsystemAutomation/bpm/oa/leave/index', color: '#f7b51c' },
]);
const LegalMenuItems = ref([
	{ label: '合同审批', icon: 'icon-hetongshenpi1', path: '/pagesPackage/Legal/contractManager/index', color: '#2cb755' },
	{ label: '集团案件审批', icon: 'icon-hetongshenpi1', path: '/pagesPackage/Legal/GroupCaseApproval/index', color: '#2cb755' },
	{ label: '一般案件审批', icon: 'icon-hetongshenpi1', path: '/pagesPackage/Legal/GeneralCase/index', color: '#2cb755' },
	{ label: '重大案件审批', icon: 'icon-hetongshenpi1', path: '/pagesPackage/Legal/MajorCase/index', color: '#2cb755' },
]);
const SafetyMenuItems = ref([
	{ label: '安全发文', icon: 'icon-fawenshenpi', path: '/pagesPackage/safety/outgoingsafety/index', color: '#4b95f3' },
	{ label: '车辆监测', icon: 'icon-hetongshenpi1', path: '/pagesPackage/safety/vehicleMonitoring/index', color: '#4b95f3' },
	{ label: '奖惩审批', icon: 'icon-bumenguanli', path: '/pagesPackage/safety/rewardpenaltyapproval/index', color: '#4b95f3' },
	{ label: '安全生产申报', icon: 'icon-jiaoseguanli', path: '/pagesPackage/safety/safeproduction/index', color: '#4b95f3' },
	{ label: '重大事故隐患', icon: 'icon-caidanguanli', path: '/pagesPackage/safety/majorhazard/index', color: '#4b95f3' },
	
]);


const clickBannerItem = (item: any) => {
	console.info(item);
};

const changeSwiper = (e: any) => {
	current.value = e.detail.current;
};

const navigateTo = (path: string) => {
	console.log('path', path);
	uni.navigateTo({
		url: path
	});
};
</script>

<style lang="scss">
/* #ifndef APP-NVUE */
page {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	background-color: #fff;
	min-height: 100%;
	height: auto;
}

view {
	font-size: 14px;
	line-height: inherit;
}

/* #endif */

.text {
	text-align: center;
	font-size: 26rpx;
	margin-top: 10rpx;
}

.grid-item-box {
	flex: 1;
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 15px 0;
}

.uni-margin-wrap {
	width: 690rpx;
	width: 100%;
	;
}

.swiper {
	height: 300rpx;
}

.swiper-box {
	height: 150px;
}

.swiper-item {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: #fff;
	height: 450rpx;
	line-height: 300rpx;
}

@media screen and (min-width: 500px) {
	.uni-swiper-dot-box {
		width: 400px;
		/* #ifndef APP-NVUE */
		margin: 0 auto;
		/* #endif */
		margin-top: 8px;
	}

	.image {
		width: 100%;
	}
}
</style>